<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<!--tree/start-->
		<script src="https://cdn.bootcss.com/jquery-treetable/3.2.0/jquery.treetable.min.js"></script>
		<link href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.min.css" rel="stylesheet">
		<link href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.css" rel="stylesheet">
		<!--tree/end-->
	</head>

	<body>
		<h1>原始-表格</h1>
		<table>
			<tr>
				<td>app</td>
			</tr>
			<tr>
				<td>controller</td>
			</tr>
			<tr>
				<td>admin.php</td>
			</tr>
			<tr>
				<td>model</td>
			</tr>
			<tr>
				<td>validate</td>
			</tr>
			<tr>
				<td>view</td>
			</tr>
		</table>
		
		<h3>静态树-表格</h3>
		<table id="example-basic-static">
			<caption>
	          <a href="#" onclick="jQuery('#example-basic-static').treetable('expandAll'); return false;">Expand all</a>
	          <a href="#" onclick="jQuery('#example-basic-static').treetable('collapseAll'); return false;">Collapse all</a>
	        </caption>
			<tr data-tt-id="0">
				<td>app</td>
			</tr>
			<tr data-tt-id="1" data-tt-parent-id="0">
				<td>controller</td>
			</tr>
			<tr data-tt-id="5" data-tt-parent-id="1">
				<td>admin.php</td>
			</tr>
			<tr data-tt-id="2" data-tt-parent-id="0">
				<td>model</td>
			</tr>
			<tr data-tt-id="3" data-tt-parent-id="0">
				<td>validate</td>
			</tr>
			<tr data-tt-id="4" data-tt-parent-id="0">
				<td>view</td>
			</tr>
		</table>

		<h1>可伸缩-表格</h1>
		<table id="example-basic-expandable">
			<caption>
	          <a href="#" onclick="jQuery('#example-basic-expandable').treetable('expandAll'); return false;">Expand all</a>
	          <a href="#" onclick="jQuery('#example-basic-expandable').treetable('collapseAll'); return false;">Collapse all</a>
	        </caption>
			<tr data-tt-id="0">
				<td>app</td>
			</tr>
			<tr data-tt-id="1" data-tt-parent-id="0">
				<td>controller</td>
			</tr>
			<tr data-tt-id="5" data-tt-parent-id="1">
				<td>admin.php</td>
			</tr>
			<tr data-tt-id="2" data-tt-parent-id="0">
				<td>model</td>
			</tr>
			<tr data-tt-id="3" data-tt-parent-id="0">
				<td>validate</td>
			</tr>
			<tr data-tt-id="4" data-tt-parent-id="0">
				<td>view</td>
			</tr>
		</table>

		<script>
			$(function() {
				$("#example-basic-static").treetable();
				$("#example-basic-expandable").treetable({
					expandable: true
				});
			})
		</script>
	</body>

</html>